
<template>
  <div class="follow" :style="containerStyle">
    <div class="follow-box" :style="boxStyle">
      <div class="follow-avatar">
        <img
          :src="data.avatar || defaultAvatar"
          alt="公众号头像"
        />
      </div>

      <div class="follow-info">
        <span :style="textStyle">{{ data.name || '公众号名称' }}</span>
      </div>

      <div class="follow-button">
        <el-button
          :color="data.buttonColor || '#07C160'"
          :size="data.buttonSize || 'default'"
          @click="handleFollow"
        >
          {{ data.buttonText || '关注公众号' }}
        </el-button>
      </div>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['follow'])

// 默认头像
const defaultAvatar = computed(() => '/src/assets/images/default-avatar.png')

// 计算容器样式
const containerStyle = computed(() => {
  return {
    padding: `${props.data.padding || 5}px ${props.data.padding || 10}px`,
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    marginRight: `${props.styles.marginRight || 0}px`
  }
})

// 计算盒子样式
const boxStyle = computed(() => {
  return {
    border: `1px solid ${props.data.borderColor || '#999'}`,
    borderRadius: `${props.data.borderRadius || 5}px`,
    backgroundColor: props.data.backgroundColor || '#ffffff'
  }
})

// 计算文本样式
const textStyle = computed(() => {
  return {
    fontSize: `${props.data.fontSize || 14}px`,
    color: props.data.textColor || '#333'
  }
})

// 事件处理
function handleFollow() {
  emit('follow', props.data)
}
</script>

<style lang="scss" scoped>
.follow {
  width: 100%;
  box-sizing: border-box;

  .follow-box {
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;

    .follow-avatar {
      width: 50px;
      height: 50px;
      margin-right: 10px;

      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
    }

    .follow-info {
      flex: 1;
      margin-right: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .follow-button {
      flex-shrink: 0;
    }
  }
}
</style>
